<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/resizeiframe.css" media="screen,projector">
    <script type="text/javascript" src="../../dependencies/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../../lib/jquery.iframer-1.1.js"></script>
    <script type="text/javascript" src="js/resizeiframe.js"></script>
    <script type="text/javascript">
        // resize hints
        var customSettings = {
            resizeHints: {
            	greenIFrame: '#greenDiv', // green iframe #id selector
            	blueIFrame: '.hintable', // green iframe #id selector
        	}
        };

        // resize iframes every 100 millisecond (1 second)
        $(document).ready(function () {
            setInterval(function() {
                $('.resizable').resizeIFrames(customSettings);
            }, 100);
        });
    </script>
    <title>jQuery IFramer Plug-in: ResizeIFrames Demo</title>
</head>
<body>
<table><tr><td>
Red: uses the default algorithm<br>
Green: uses an '#id' selector to get a block element inside the iframe to resize against<br>
Blue: uses an '.class' selector to get a block element inside the iframe to resize against<br>
Black: does not resize as it is not selected in the 'resizeIFrames' method<br>
</td></tr></table>

<div id="controller">
    <table>
        <tr>
            <td align="left">Color:</td>
            <td>
                <select id="color" onchange="updateColor()">
                    <option>red</option>
                    <option>green</option>
                    <option>blue</option>
                </select>
            </td>
        </tr>
        <tr>
            <td align="left">Width:</td>
            <td align="right"><input id="width" type="text" tabindex="1" onchange="resizeIFrameContent();updateInfo();" value="50"/></td>
        </tr>
        <tr>
            <td align="left">Height:</td>
            <td align="right"><input id="height" type="text" tabindex="2" onchange="resizeIFrameContent();updateInfo();" value="50"/></td>
        </tr>
        <tr>
            <td colspan="2"><div style="height: 10px"></div></td>
        </tr>        
        <tr>
            <td align="center"><div style="width:15px; height:15px; background-color: red;"></div></td>
            <td align="left" id="redInfo">50 x 50</td>
        </tr>
        <tr>
            <td align="center"><div style="width:15px; height:15px;  background-color: green;"></div></td>
            <td align="left" id="greenInfo">100 x 100</td>
        </tr>
        <tr>
            <td align="center"><div style="width:15px; height:15px;  background-color: blue;"></div></td>
            <td align="left" id="blueInfo">200 x 200</td>
        </tr>
        <tr>
            <td align="center"><div style="width:15px; height:15px;  background-color: black;"></div></td>
            <td align="left" id="blackInfo">400 x 400</td>
        </tr>        
    </table>
</div>
<table>
    <tr>
        <td valign="top">
            <iframe id="redIFrame" class="resizable" src="html/red.html" width="0" height="0" scrolling="no"
                    marginheight="0" marginwidth="0"
                    frameborder="0" allowTransparency="true"></iframe>
        </td>
        <td valign="top">
            <iframe id="greenIFrame" class="resizable" src="html/green.html" width="0" height="0" scrolling="no"
                    marginheight="0"
                    marginwidth="0"
                    frameborder="0" allowTransparency="true"></iframe>
        </td>
        <td valign="top">
            <iframe id="blueIFrame" class="resizable" src="html/blue.html" width="0" height="0" scrolling="no"
                    marginheight="0"
                    marginwidth="0"
                    frameborder="0" allowTransparency="true"></iframe>
        </td>
        <td valign="top">
            <iframe id="blackIFrame" src="html/black.html" width="400" height="400" scrolling="no" marginheight="0"
                    marginwidth="0"
                    frameborder="0" allowTransparency="true"></iframe>
        </td>
    </tr>
</table>
</body>
</html>